import React from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Navigator, Text, Block} from '@tarojs/components'
import Skeleton from 'taro-skeleton'
import {Good} from '../../../utils/server.interface'
import {platform} from "../../../utils/platform-settting.service";
import Float from '../../../components/float/float';
import './small-goods-car.scss'

const SmallGoodsCar: React.FC<{ data: Good[]; loading?: boolean }> = (props) => {
  const dataColor = Taro.getStorageSync('colorData');
  const goods = props.data.slice()

  const renderDiscountLabel = item => {
    let domDiscount = null;

    if(!!item.is_activity) {
      domDiscount = (
        <Block>
          <Text className='discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
        </Block>
      )
    }else {
      // 优先展示退款标签(仅蝌蚪)
      if(process.env.P_ENV === 'kd' && item.refund_sign) {
        const refund_signArr = item.refund_sign.split(",");
        domDiscount = (
          <Block>
            <Text className='refund-sign'><Text
              className='font-family-price'
            >{refund_signArr[0]}</Text></Text>
          </Block>
        )
      }else {
        if(!!item.discount) {
          domDiscount = (
            <Block>
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                className='font-family-price'
              >{item.discount}</Text>折</Text>
            </Block>
          )
        }
      }
    }
    return domDiscount;
  };

  return (
    <View className='small-goods-box'>
      <View className='left'>
        <Skeleton row={3} loading={props.loading} className='paddingNone' rowHeight={360}>
          <Block>
            {goods.length > 0 && goods.map((item, index) => <Block key={item.id}>{index % 2 === 0 &&
            <Navigator className='good-item-box' hoverClass='none' url={item.url}>
              <View className='img-box'>
                {item.price ?
                  <View className='shangxin-today-block-item-image'>
                    <Image
                      src={item.main_img || item.img}
                      mode='widthFix' className='img'
                    />
                    {!props.isUser && !!item.commission && process.env.DISTINGUISH_IDENTITY && <View className='commission_price'>
                      <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.commission} />
                    </View> }
                  </View>
                  :
                  <View className='shangxin-today-block-item-image'>
                    <Image
                      src={item.main_img || item.img}
                      mode='aspectFill' className='img h'
                    />
                    {!props.isUser && !!item.commission && process.env.DISTINGUISH_IDENTITY && <View className='commission_price'>
                      <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.commission} />
                    </View>}
                  </View>
                }
                { renderDiscountLabel(item) }
                {!item.price &&
                <View className='top-title-box'>
                  <View className='title-box'>
                    <View className='top-title'>{item.name}</View>
                    <View className='go-look'>去看看</View>
                  </View>
                </View>}
              </View>
              {!!item.price && <View className='has-bg-white'>
                <View className='title-box'>
                  <View className='title'>{item.name}</View></View>
                <View className='price-box'>
                  <View><Text className='symbol font-family-price'
                              style={`color: ${dataColor.priceColor}`}
                  >¥</Text><View
                    className='number font-family-price'
                    style={`display:inline-block;color: ${dataColor.priceColor}`}
                  ><Float value={item.price} /></View>
                    {!!item.couponLabel && <View className='price-box-yh'>领券优惠</View>}
                  </View>
                  {!!item.salesVolume && !!platform.info.is_show_sales_volume && <Text className='salesVolume'>销量：{item.salesVolume}笔</Text>}
                </View>
              </View>}
            </Navigator>}</Block>)}
          </Block>
        </Skeleton>
      </View>
      <View className='right'>
        <Skeleton row={3} loading={props.loading} className='paddingNone' rowHeight={360}>
          <Block>
            {goods.length > 0 && goods.map((item, index) => <Block key={item.id}>{index % 2 === 1 &&
            <Navigator className='good-item-box' key={item.id} hoverClass='none' url={item.url}>
              <View className='img-box'>
                {item.price ?
                  <View className='shangxin-today-block-item-image'>
                    <Image
                      src={item.main_img || item.img}
                      mode='widthFix' className='img'
                    />
                    {!props.isUser && !!item.commission && process.env.DISTINGUISH_IDENTITY && <View className='commission_price'>
                      <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.commission} />
                    </View> }
                  </View>
                  :
                  <View className='shangxin-today-block-item-image'>
                    <Image
                    src={item.main_img || item.img}
                    mode='aspectFill' className='img h'
                    />
                    {!props.isUser && !!item.commission && process.env.DISTINGUISH_IDENTITY && <View className='commission_price'>
                      <Text className='commission_price-text'>分享赚</Text><Text className='price-symbol font-family-price'>￥</Text><Float value={item.commission} />
                    </View> }
                  </View>

                }
                {!!item.is_activity ? <Block>
                  <Text className='discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
                </Block> : <Block>
                  {!!item.discount &&
                  <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                    className='font-family-price'
                  >{item.discount}</Text>折</Text>}
                </Block>}
                {!item.price &&
                <View className='top-title-box'>
                  <View className='title-box'>
                    <View className='top-title'>{item.name}</View>
                    <View className='go-look'>去看看</View>
                  </View>
                </View>}
              </View>
              {!!item.price &&  <View className='has-bg-white'>
                <View className='title-box'><View className='title'>{item.name}</View></View>
                <View className='price-box'>
                  <View><Text className='symbol font-family-price'
                              style={`color: ${dataColor.priceColor}`}
                  >¥</Text><View
                    className='number font-family-price'
                    style={`display:inline-block;color: ${dataColor.priceColor}`}
                  ><Float value={item.price} /></View>
                    {!!item.couponLabel && <View className='price-box-yh'>领券优惠</View>}
                  </View>{!!item.salesVolume && !!platform.info.is_show_sales_volume &&
                <Text>销量：{item.salesVolume}笔</Text>}
                </View>
              </View>}
            </Navigator>}</Block>)}
          </Block>
        </Skeleton>
      </View>
    </View>
  )
}
SmallGoodsCar.defaultProps = {
  data: [],
  loading: false,
}

export default SmallGoodsCar
